<template>
<div class="search-history">

  <van-cell-group >
    <van-cell title="历史记录">
      <template v-if="isDeleteShow">
        <span @click="clearAllHistory">全部删除</span>
        &nbsp;&nbsp;
        <span @click="isDeleteShow = false">完成</span>
      </template>
      <van-icon v-else name="delete" @click="isDeleteShow = true"></van-icon>
    </van-cell>
    <van-cell
      v-for="(item, index) in Historys"
      :key="index"
      @click="onHistoryClick(item, index)"
    >{{item}}
      <van-icon v-if="isDeleteShow" name="close"></van-icon>
    </van-cell>
  </van-cell-group>


</div>
</template>

<script>
import {getItem,setItem} from '@/utils/storage'
export default {
name: "search-history",
  data () {
    return {

     Historys:[],
      isDeleteShow: false,

    }
  },
  props:{
    searchHistory:{
      type:Array,
      required:true
    }

  },
  watch: {
    searchHistory:{
      immediate:true,
      handler(val){
        if (val.length ===0){
          return
        }
        setItem('histories', val)
        this.History()
      }
    },



  },
  methods:{

  //给父组件及本组件监听
    History(){
      const arr=getItem('histories')
      this.Historys=arr

      },
    //删除历史记录的相关操作
    onHistoryClick (item, index) {
      // 如果是删除状态，则执行删除操作
      if (this.isDeleteShow) {
        this.Historys.splice(index, 1)
        setItem('histories', this.Historys)
      } else {
        // 否则执行搜索操作
        this.$emit('onSearch',item)
      }
    },
    clearAllHistory(){
      this.Historys=[]
      setItem('histories',[])
    }



  }
}
</script>

<style scoped>

</style>
